<template>
	<view class="demo">
		<view class="container" >
			<!-- 团体入园凭证 -->
			<view class="ticket-header">团体入园凭证</view>
			<view class="time">2024年6月{{ groupInfo.selectedDate }}日 {{ groupInfo.selectedTime }}</view>

			<!-- 预约信息 -->
			<text class="section-title">预约信息</text>
			<view class="info-section">

				<view class="info-item">
					<text class="item-label">团体名称：</text>
					<text class="item-value">{{ groupInfo.groupName }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">团体人数：</text>
					<text class="item-value">{{ groupInfo.numberOfPeople }}人</text>
				</view>
			</view>

			<!-- 个人信息 -->
			<text class="section-title">预约信息</text>
			<view class="info-section">

				<view class="info-item">
					<text class="item-label">姓名：</text>
					<text class="item-value">{{ groupInfo.name }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">证件类型：</text>
					<text class="item-value">{{ groupInfo.idType }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">证件号码：</text>
					<text class="item-value">{{ groupInfo.idNumber }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">手机号码：</text>
					<text class="item-value">{{ groupInfo.phoneNumber }}</text>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="tips">园区花草，种植不易请爱护</view>


		</view>
		<!-- 倒计时提示 -->
		<view class="countdown-tips">离凭证消失剩余<text
				class="countdown-tips-time">{{ countdown }}小时{{ minutes }}</text>分钟。可发起新的预约
				</view>
		<button class="tijiao" @click="toreserve">
			<text class="tijiao1">查看预约记录</text>
		</button>		
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app';

	onLoad((options) => {
		console.log(options)
		groupInfo.value = JSON.parse(options.params);
		console.log(groupInfo.value)
	})

	const groupInfo = ref({});

	const countdown = ref(3); // 小时数
	const minutes = ref(56); // 分钟数
	function toreserve() {
		// 创建团体预约记录对象，并使用新的变量名 groupReservation


		// 将团体预约信息添加到全局预约记录数组中
		getApp().globalData.reserveRecords = {
			groupInfo: groupInfo.value,
			countdown: countdown.value,
			minutes: minutes.value,
			type: '团体预约'
		};

		// 跳转到 tabBar 页面
		uni.switchTab({
			url: '/pages/reserveRecord/reserveRecord'
		});
	};

</script>

<style scoped>
	.demo {
		padding: 12px;
	}

	.container {

		padding: 20rpx;
		padding-top: 33px;
		background-image: url(../../static/bg3.png);
		background-size: cover;
	}

	.ticket-header {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.time {
		color: #666;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.info-section {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 24rpx;
		margin-bottom: 40rpx;
	}

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		margin-top: 43px;
	}

	.info-item {

		align-items: center;
		padding: 10px 0;
	}

	.item-label {
		width: 200rpx;
		color: #333;
		font-size: 28rpx;
	}

	.item-value {
		flex-grow: 1;
		text-align: right;
		color: #666;
		font-size: 26rpx;
		color: #000;
	}

	.tips {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin: 50px 0;
	}

	.countdown-tips {
		text-align: center;

		color: #5f5f5f;
		font-size: 12px;
		margin-top: 60rpx;
	}

	.countdown-tips-time {
		color: #8DCB6D;
	}
	.tijiao{
		margin: 15px;
		
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
	}
	.tijiao1 {
		width: 68px;
		height: 24px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
</style>